<script setup>
import {defineExpose, onMounted, ref} from "vue";
import BasePagination from "@/components/common/BasePagination.vue";
import service from "./service";
// 表格数据
const tableData = ref([])
// 分页数据
const pageInfo = ref({
    current: 1,
    pages: 0,
    size: 20,
    total: 0
})

const getPageData = async (page, size, queryParam) => {
    const resultData = await service.read.getPageData(page, size, queryParam)
    tableData.value = resultData.list
    pageInfo.value = {...pageInfo.value, ...resultData.pagination}
}

const handlePagesEvent = (page, size) => getPageData(page, size)

onMounted(() => getPageData(1, 20))

const columnInfo = ref([
    {prop: "userNum", label: "用户编号", minWidth: 85},
    {prop: "userCode", label: "用户编码", minWidth: 115},
    {prop: "userName", label: "用户姓名", minWidth: 125},
    {prop: "sex", label: "性别", minWidth: 55},
    {prop: "email", label: "邮箱", minWidth: 200},
    {prop: "entryDate", label: "入职日期", minWidth: 100},
    {prop: "workPhone", label: "工作电话", minWidth: 115},
    {prop: "mobile", label: "手机号", minWidth: 115},
    {prop: "identityType", label: "证件类型", minWidth: 85},
    {prop: "identityNo", label: "证件编号", minWidth: 170},
    {prop: "birthday", label: "生日", minWidth: 100},
    {prop: "qq", label: "QQ号", minWidth: 120},
    {prop: "weChat", label: "微信号", minWidth: 100},
    {prop: "weChatId", label: "微信唯一编码", minWidth: 110},
    {prop: "userStatus", label: "人员状态", minWidth: 85},
    {prop: "employmentType", label: "用工类型", minWidth: 85},
    {prop: "emergencyName", label: "紧急联系人姓名", minWidth: 125},
    {prop: "emergencyMobile", label: "紧急联系人电话", minWidth: 125},
    {prop: "education", label: "学历", minWidth: 55},
    {prop: "contractStartDate", label: "合同开始日期", minWidth: 110},
    {prop: "contractEndDate", label: "合同结束日期", minWidth: 110}
])

const getPageDataByParam = (queryParam) => getPageData(1, 20, queryParam)

const emit = defineEmits(['submitEditVisible', 'submitRemoveVisible'])

const removeData = () => {
    emit('submitRemoveVisible')
}

const editData = () => {
    emit('submitEditVisible')
}

defineExpose({
    getPageDataByParam
})

</script>

<template>
    <el-table
        :data="tableData"
        :stripe="true"
        :border="true"
        style="width: auto"
    >
        <el-table-column type="selection" width="40"/>

        <el-table-column v-for="column in columnInfo"
                         :prop="column.prop"
                         :label="column.label"
                         :min-width="column.minWidth"
        />

        <el-table-column label="操作" :width="135" fixed="right">
            <template #default>
                <el-button type="warning" size="small" @click="editData">修改</el-button>
                <el-button type="danger" size="small" @click="removeData">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <BasePagination :pageInfo="pageInfo" @pagesEvent="handlePagesEvent"></BasePagination>
</template>

<style scoped lang="scss">
.el-table {
    height: $table-height;
    minWidth: 100%;
}
</style>
